<template>
    <div>
        <div style="margin-bottom: 10px;margin-top: 10px;">
            <el-input v-model="name"  placeholder="请输入机构名称" suffix-icon="el-icon-search" style="width: 200px"
            @keyup.enter.native="loadPost"></el-input>
           
       
            <el-button type="primary" style="margin-left: 5px" @click="loadPost" >查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
        </div>
    <el-table :data="tableData"
    :header-cell-style="{background:'#f2f5fc',color:'#555'}" border>
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
  
        <el-table-column prop="name" label="机构名称" width="240">
        </el-table-column>
   
        <el-table-column prop="address" label="机构地址"  width="240">
        </el-table-column>
  
        <el-table-column prop="legalName" label="法人姓名"  width="160">
        </el-table-column>
  
        <el-table-column prop="registeNum" label="统一社会信用代码"  width="180">
        </el-table-column>
  
        <el-table-column prop="isVip" label="会员"  width="100" :formatter="isVipFormate">
        </el-table-column>
  
        <el-table-column prop="status" label="状态"  width="100" :formatter="statusFormate">
        </el-table-column>
        
        <el-table-column prop="operate" label="操作">
            <template slot-scope="scope">
            <el-button size="small" type="primary" @click="mod(scope.row)">审核</el-button>
         
            </template>
        </el-table-column>
  
    </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagenum"
                :page-sizes="[2,5, 10, 15, 20,25,30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
  
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="80%"
                center>
  <!--           //增加表单-->
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
            
                <el-form-item label="机构名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
  
                <el-form-item label="法人姓名" prop="legalName">
                        <el-input v-model="form.legalName"></el-input>
                </el-form-item>
  
                <el-form-item label="机构地址" prop="address">
                        <el-input v-model="form.address"></el-input>
                </el-form-item>
  
                <el-form-item label="统一社会信用代码" prop="registeNum">
                        <el-input  v-model="form.registeNum"></el-input>
                </el-form-item>
  
        
               
  
                <el-form-item label="营业执照图片" prop="licensePath">
                    <el-upload
                     class="avatar-uploader"
                     action="http://localhost:9001/jk/admin/unit/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                   >
                        <img v-if="form.licensePath" :src="form.licensePath" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                 
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择属于状态">
                  <el-option label="申请中" value="1"></el-option>
                  <el-option label="审核通过" value="2"></el-option>
                  <el-option label="审核未通过" value="3"></el-option>
                
                   </el-select>
                </el-form-item>
  
                <el-form-item label="审核备注" prop="bak">
                        <el-input  v-model="form.bak" placeholder="审核备注非必填"></el-input>
                </el-form-item>
  
            </el-form>
  
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="save">确 定</el-button>
              </span>
              <!-- 上传图片 -->
              

        </el-dialog>
    </div>
  </template>
  
  <script>

      export default {
          name: "UnitList",
       
          data() {
           
              return {
          
  
                tableData: [],
                pagenum:1,
                pageSize:2,
                total:0,
                name:'',
                  centerDialogVisible:false,
                  form:{
                      id:'',
                      name:'',
                      legalName:'',
                      address:'',
                      registeNum:'',
                      isVip:'',
                      licensePath:'',
                      bak:'',
                      status:''
                   
                  },
                  rules: {
                     
                      name: [
                          { required: true, message: '请输入名字', trigger: 'blur' },
                      ],
                     
  
                  }
  
              }
  
          },
          methods:{
                // 显示状态
                statusFormate(row, index){
                  if(row.status == 1){
                      return "申请中";
                  }else if(row.status == 2){
                      return "审核通过";
                  }else if(row.status == 3){
                      return "审核未通过";
                  }
              },
                // 显示状态
                isVipFormate(row, index){
                  if(row.isVip == 2){
                      return "非会员";
                  }else if(row.isVip == 1){
                      return "会员";
                  }
              },
              resetForm() {
                  this.$refs.form.resetFields();
              },
              mod(row){
              //    赋值到表单
                  this.centerDialogVisible=true
                  this.$nextTick(()=>{
                      this.form.id = row.id
                      this.form.name = row.name
                      this.form.address = row.address
                      this.form.legalName = row.legalName
                      this.form.registeNum = row.registeNum
                      this.form.bak = row.bak
                      this.form.status = row.status
                      this.form.licensePath = row.licensePath
                   
                      //    这个在第一次的时候不能使用，所以需要nextTick异步
                  })
              },
            
            
              // 修改
              doMod(){
                  this.$axios.put(this.$httpUrl+'/jk/admin/unit/updateStatus?status='+this.form.status+'&id='+this.form.id).then(res=>res.data).then(res=>{
  
                      if (res.resCode=='000000'){
                          this.$message({
                              message: '操作成功',
                              type: 'success'
                          });
                          //成功之后离开刷新页面
  
                          this.centerDialogVisible=false
                          this.loadPost()
                          // this.resetForm()
  
                      }else{
                          this.$message({
                              message: '操作失败',
                              type: 'error'
                          });
                      }
  
                  })
              },
          
              save(){
                  this.$refs.form.validate((valid) => {
                      if (valid) {                      
                              this.doMod()  
                      } else {
                          console.log('error submit!!');
                          return false;
                      }
                  });
  
              },
              handleAvatarSuccess(res, file) {
                 this.form.licensePath = URL.createObjectURL(file.raw);
                },
              handleSizeChange(val) {
                  
                  this.pagenum=1
                  this.pageSize=val
                  this.loadPost()
              },
              handleCurrentChange(val) {
                  
                  this.pagenum=val
                  this.loadPost()
              },
            
              resetParam(){
                  this.name=''
                  
              },
              loadPost(){
               
                  this.$axios.get(this.$httpUrl+'/jk/admin/unit/listT?name='+this.name+'&pagenum='+this.pagenum +'&pageSize='+this.pageSize
                  ).then(res=>res.data).then(res=>{
    
                    console.log(res)
                      if (res.resCode=='000000'){
                          this.tableData=res.data.records
                          this.total=res.data.total
  
                      }else{
                          alert('获取数据失败')
                      }
  
                  })
              },
           
          },
          beforeMount() {
              
              this.loadPost();
  
          }
      }
  </script>
  
<style lang="less" scoped>
.avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {
   border-color: #409EFF;
 }
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
   width: 178px;
   height: 178px;
   line-height: 178px;
   text-align: center;
 }
 .avatar {
   width: 178px;
   height: 178px;
   display: block;
 }
</style>